<template>
  <div id="home">
    <el-container>
      <el-aside :width="isShow ? '65px' : '200px'">
        <el-menu
          :style="'height:' + winHight"
          router
          @open="handleOpen"
          :collapse="isShow"
          default-active="/homePage"
          class="el-menu-vertical-demo navIcon"
          background-color="#1A1B20"
          text-color="#34BFA3"
          active-text-color="#ffd04b"
        >
          <el-menu-item
            v-for="(item, index) in navList"
            :key="index"
            :index="item.path"
            v-if="!item.children"
            @click="homeFn(index)"
          >
            <i :class="item.icon"></i>
            <span slot="title">{{ item.name }}</span>
          </el-menu-item>
          <el-submenu
            v-for="(item, index) in navList"
            :key="index"
            :index="item.path"
            v-if="item.children"
          >
            <template slot="title">
              <i :class="item.icon"></i>
              <span>{{ item.name }}</span>
            </template>
            <el-submenu
              v-for="(items, indexs) in item.children"
              :key="indexs"
              :index="items.path"
              v-if="items.children"
            >
              <template slot="title">{{ items.name }}</template>
              <el-menu-item
                v-for="(itemss, indexss) in items.children"
                :key="indexss"
                :index="itemss.path"
                >{{ itemss.name }}</el-menu-item
              >
            </el-submenu>
            <el-menu-item-group>
              <el-menu-item
                v-for="(items, indexs) in item.children"
                :key="indexs"
                :index="items.path"
                @click="titChFn(index,indexs)"
                v-if="!items.children"
                >{{ items.name }}</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container :style="'height:' + winHight">
        <el-header class="header" style="height: ''">
          <div class="txt1">
            <div class="left titIcon">
              <i :class="packIcon" @click="pack()"></i>
            </div>
            <div class="left title">
              <el-breadcrumb separator="/">
                <el-breadcrumb-item 
                :to="titTxt2==''?'':{path:'/home'}"
                @click.native="backFn"
                  >首页</el-breadcrumb-item
                >
                <el-breadcrumb-item v-if="titTxt1">{{titTxt1}}</el-breadcrumb-item>
                <el-breadcrumb-item v-if="titTxt1">{{titTxt2}}</el-breadcrumb-item>
              </el-breadcrumb>
            </div>
            <div class="clear"></div>
          </div>
          <div class="txtList">
            <div class="listBox" 
            :class="txt==item.name?'listBoxBj':''"  
            v-for="(item,index) in browseList" 
            :key="index"
            @click="jumpFn(index)"
            >
              <span class="circle"></span>
              {{item.name}} 
              <span class="el-icon-close" @click.stop="delFn1(index)"></span>
              </div>
              <div class="clear"></div>
          </div>
        </el-header>
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import {getStore,setSession,getSession} from '@/config/config';
export default {
  name: "home",
  data() {
    return {
      winHight: document.documentElement.clientHeight + "px", //实时屏幕高度
      isShow: false,
      packIcon: "el-icon-s-fold",
      navList: [
        {
          path: "/homePage",
          name: "首页",
          icon: "el-icon-s-home",
        },
        {
          path: "/userManagement",
          name: "用户管理",
          icon: "el-icon-user",
          children: [
            {
              path: "/userManagement/userDataList",
              name: "用户数据列表",
            },
            {
              path: "/userManagement/Money",
              name: "佣金管理",
            },
            {
              path: "/userManagement/userAddress",
              name: "收货地址",
            },
          ],
        },
        {
          path: "/commodity",
          name: "商品管理",
          icon: "el-icon-goods",
          children: [
            {
              path: "/commodity/goodsList",
              name: "商品列表",
            },
            {
              path: "/commodity/review",
              name: "商品评论",
            },
              {
              path: "/commodity/classgoods",
              name: "商品管理",
            },
              {
              path: "/commodity/brand",
              name: "品牌管理",
            },
          ],
        },
        {
          path: "/orders",
          name: "订单管理",
          icon: "el-icon-s-order",
          children: [
            {
              path: "/orders/orderManage",
              name: "订单列表",
            },
            {
              path: "/orders/orderReason",
              name: "退货理由",
            },
            {
              path: "/orders/orderApproval",
              name: "退货管理",
            },
          ],
        },
        {
          path: "/promote",
          name: "推广管理",
          icon: "el-icon-bell",
          children: [
            {
              path: "/promote/advertising",
              name: "广告管理",
            },
            {
              path: "/promote/bulk",
              name: "团购规则",
            },
            {
              path: "/promote/ses",
              name: "秒杀场次管理",
            },
            {
              path: "/promote/seckill",
              name: "秒杀活动",
            },
         
          ],
        },
        {
          path: "/rightsManagement",
          name: "系统管理",
          icon: "el-icon-s-operation",
          children: [
            {
              path: "/rightsManagement/administrator",
              name: "管理员",
            },
            {
              path: "/rightsManagement/roleManagement",
              name: "角色管理",
            },
          ],
        },
        {
          path: "/statistical",
          name: "统计",
          icon: "el-icon-pie-chart",
          children: [
            {
              path: "/statistical/user",
              name: "用户统计",
            },
            {
              path: "/statistical/order",
              name: "订单统计",
            },
            {
              path: "/statistical/goods",
              name: "商品统计",
            },
          ],
        },
      ],
      browseList: [{txt:'',name:"首页",path:'/homePage'}],
      titTxt1:'',
      titTxt2:'',
      arr:['首页'],
      txt:'首页',
    };
  },
  mounted() {
    let _self = this;
    // 首先在Virtual DOM渲染数据时，设置下背景图的高度．
    _self.winHight = `${document.documentElement.clientHeight}px`;
    // 然后监听window的resize事件．在浏览器窗口变化时再设置下背景图高度．
    window.onresize = function temp() {
      _self.winHight = `${document.documentElement.clientHeight}px`;
      if(document.documentElement.clientWidth<1050){
        _self.isShow = true;
      }
    };
    window.addEventListener("beforeunload", function(e) {
      let data1 = {
        titTxt1:_self.titTxt1,
        titTxt2:_self.titTxt2,
        txt:_self.txt,
      }
      setSession('bList',JSON.stringify(data1))
      setSession('bList2',JSON.stringify(_self.browseList))
    });
    if(getSession('bList')){
      let {titTxt1,titTxt2,txt} = JSON.parse(getSession('bList'))
      _self.titTxt1 = titTxt1;
      _self.titTxt2 = titTxt2;
      _self.txt = txt;
    }
    if(getSession('bList2')){
      _self.browseList = JSON.parse(getSession('bList2'))
    }
  },
  methods: {
    homeFn(index){
      let _self = this;
      if(index==0){
          _self.titTxt1='';
          _self.titTxt2='';
          if(_self.browseList.findIndex(item=>item.name.indexOf('首页')!=-1)<0){
            _self.browseList.unshift({txt:'',name:"首页",path:'/homePage'});
          };
          _self.txt = '首页';
      }
      
    },
    handleOpen(key){
      let _self = this;
      _self.titTxt2 = '';
      for(let item of _self.navList){
        if(item.path==key){
          _self.titTxt1 = item.name
        }
      }
    },
    backFn(){
      let _self = this;
      _self.titTxt1='';
      _self.titTxt2='';
      if(_self.browseList.findIndex(item=>item.name.indexOf('首页')!=-1)<0){
        _self.browseList.unshift({txt:'',name:"首页",path:'/homePage'});
      };
      _self.txt = '首页';
    },
    titChFn(index1,index2){
      let _self = this;
      _self.titTxt1 = _self.navList[index1].name;
      _self.titTxt2=_self.navList[index1].children[index2].name;
      _self.txt = _self.titTxt2;
      if((_self.browseList.findIndex(item=>item.name==_self.titTxt2))<0){
        _self.browseList.push(
          {
            txt:_self.navList[index1].name,
            name:_self.titTxt2,
            path:_self.navList[index1].children[index2].path
          }
        )
      }
    },
    delFn1(index){
      let _self = this;
      if(_self.browseList[index].name==_self.txt && _self.browseList.length>1){
        _self.browseList.splice(index,1)
        let type = true;
        for(let item of _self.browseList){
          if(item.path==getStore('fromRouter')){
            _self.txt = item.name;
            _self.titTxt2 = item.name;
            _self.$router.go(-1)
            type = false;
          }
        }
        if(type){
            _self.$router.replace({path:_self.browseList[0].path})
            _self.titTxt1 = _self.browseList[0].txt;
            _self.titTxt2=_self.browseList[0].name;
            _self.txt = _self.browseList[0].name;
        }
        
      }else if(_self.browseList.length>1){
        _self.browseList.splice(index,1)
      }
    },
    jumpFn(index){
      let _self = this;
      if(_self.browseList[index].name!=_self.txt){
          _self.txt = _self.browseList[index].name
          _self.$router.push(_self.browseList[index].path)
          _self.titTxt1 = _self.browseList[index].txt;
          _self.titTxt2 = _self.browseList[index].name;
      }
    },
    pack() {
      let _self = this;
      _self.isShow = !_self.isShow;
      if (_self.isShow == true) {
        _self.packIcon = "el-icon-s-unfold";
      } else {
        _self.packIcon = "el-icon-s-fold";
      }
    },
  },
};
</script>
<style scoped>
* {
  padding: 0;
  margin: 0;
}
.left {
  float: left;
}
.right {
  float: right;
}
.clear {
  clear: both;
}

.el-aside {
  overflow-y: auto;
  overflow-x: hidden;
}
.navIcon i {
  font-size: 20px;
  /* color: #fff; */
  color:#34BFA3;
}
.el-submenu__title:hover{
  color: #ffd04b !important;
}
.navIcon span {
  line-height: 30px;
}
.header {
  width: 100%;
  border-bottom: 1px solid #EBEEF5;
  padding: 0;
}
.header i {
  font-size: 30px;
}
.el-breadcrumb {
  font-size: 14px;
  line-height: 1;
}
.txt1 {
  margin-left: 20px;
}
.title {
  height: 30px;
  line-height: 30px;
  margin: 0;
  margin-top: 18px;
}
.titIcon {
  margin-top: 10px;
  margin-right: 10px;
}
.txtList {
  line-height: 20px;
  width: 100%;
  border-top: 1px solid #EBEEF5;
  padding-left: 25px;
}
.listBox {
  float: left;
  margin: 5px 10px;
  padding: 0 10px;
  height: 20px;
  line-height: 20px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.listBoxBj{
  /* background-color: #42b983; */
  background-color: #34BFA3;
  color: white;
}
.circle{
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #fff;
  position: relative;
  top: -2px;
}
.el-icon-close{
  font-size: 12px;
  font-weight: bold;
}
.el-main{
  /* background-color: #f8f8f8; */
  /* background-image: url(https://seopic.699pic.com/photo/40169/5736.jpg_wh1200.jpg); */
  /* background-size: 100% 100%; */
  background-color: #fff;
  padding: 40px;
}
</style>